<template>
	<view class="address-content">
		<view class="top-block">
			<view class="title">选择所在地区</view>
		</view>
		<view class="address-block">
			<view class="name-item">
				<view class="line"></view>
				<view class="name">县市</view>
			</view>
			<view class="address-item">
				<view class="address-list" v-for="item in cityList" :key="item.num"
					:class="selectCity===item.num?'active':''" @click="changeCity(item.num)">
					<view>{{item.nameStr}}</view>
				</view>
			</view>
			<template v-if="streeList.length>0">
				<view class="name-item">
					<view class="line"></view>
					<view class="name">乡镇/街道</view>
				</view>
				<view class="address-item">
					<view class="address-list" v-for="item in streeList" :key="item.id"
						:class="selectStree===item.id?'active':''" @click="changeStree(item.id)">
						<view>{{item.name}}</view>
					</view>
				</view>
			</template>
			<template v-if="communityList.length>0">
				<view class="name-item">
					<view class="line"></view>
					<view class="name">社区/村组</view>
				</view>
				<view class="address-item">
					<view class="address-list" v-for="item in communityList" :key="item.id"
						:class="selectCommunity===item.id?'active':''" @click="changeCommunity(item.id)">
						<view>{{item.name}}</view>
					</view>
				</view>
			</template>
		</view>
		<view class="btn-item">
			<view class="btn" @click="goHome">进入首页</view>
		</view>
	</view>
</template>

<script>
	import {
		getAddressListApi,
		getStreetListApi,
		getCommunityListApi,
		updateByIdApi
	} from '@/api/address.js'
	import {
		getStorage,
		setStorage
	} from '@/util/auth.js'
	export default {
		data() {
			return {
				cityList: [],
				selectCity: 0,
				streeList: [],
				communityList: [],
				selectStree: 0,
				selectCommunity: 0
			}
		},
		methods: {
			changeCity(e) {
				this.selectCity = e
				this.getStreetList()
				this.communityList = []
			},
			changeStree(e) {
				this.selectStree = e
				this.getCommunityList()
			},
			changeCommunity(e) {
				this.selectCommunity = e
			},
			getAddressList() {
				getAddressListApi().then((res) => {
					this.cityList = res ?? [];
					//this.getStreetList()
				})
			},
			getStreetList() {
				getStreetListApi({
					addressNum: this.selectCity
				}).then((res) => {
					this.streeList = res ?? []
					//this.selectStree = this.streeList[0].id
					//this.getCommunityList()
				})
			},
			getCommunityList() {
				getCommunityListApi({
					street: this.selectStree
				}).then((res) => {
					this.communityList = res ?? []
				})
			},
			goHome() {
				if (this.communityList.length > 0) {
					if (this.selectCommunity !== 0) {
						updateByIdApi({
							cId: this.selectCommunity,
							sId: this.selectStree,
							type: getStorage('identity')
						}).then((res) => {
							setStorage('ifInfoFinished', 1)
							if (getStorage('identity') === 1) {
								this.showToast('保存成功', () => {
									uni.reLaunch({
										url: '/pages/home/index'
									})
								});
							} else {
								this.showToast('保存成功', () => {
									uni.redirectTo({
										url: `/page_other/enterprise/authorization/examine`
									})
								});
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择您的所在地区！'
						})
					}
				} else {
					if (this.selectStree !== 0) {
						updateByIdApi({
							cId: this.selectCommunity,
							sId: this.selectStree,
							type: getStorage('identity')
						}).then((res) => {
							setStorage('ifInfoFinished', 1)
							if (getStorage('identity') === 1) {
								this.showToast('保存成功', () => {
									uni.reLaunch({
										url: '/pages/home/index'
									})
								});
							} else {
								this.showToast('保存成功', () => {
									uni.redirectTo({
										url: `/page_other/enterprise/authorization/examine`
									})
								});
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择您的所在地区！'
						})
					}
				}
			}
		},
		onLoad() {
			this.getAddressList()
		}
	}
</script>

<style lang="scss" scoped>
	.address-content {
		background-color: #fff;
		min-height: 100vh;

		.top-block {
			width: 100%;
			height: 400rpx;
			padding: 30rpx;
			background: #fff url('https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/address_bg.png') no-repeat right;

			.title {
				font-size: 45rpx;
				font-weight: bold;
				padding-top: 240rpx;
			}
		}

		.address-block {
			padding: 0 30rpx 110rpx 30rpx;

			.name-item {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.line {
					background: #1156FF;
					width: 14rpx;
					height: 36rpx;
					border-radius: 30rpx;
					margin-right: 10rpx;
				}

				.name {
					color: #1156FF;
					font-size: 32rpx;
				}
			}

			.address-item {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 30rpx;

				.address-list:nth-child(3n) {
					margin-right: 0;
				}

				.address-list {
					width: calc((100% - 60rpx) /3);
					margin-right: 30rpx;
					margin-bottom: 30rpx;
					background-color: #F9F9F9;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 15rpx;
					font-size: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.address-list.active {
					background-color: #729EEC;
					color: #fff;
				}
			}
		}

		.btn-item {
			width: 100%;
			position: fixed;
			bottom: 40rpx;
			left: 10%;

			.btn {
				background-color: #729EEC;
				color: #fff;
				width: 80%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20rpx;
			}
		}
	}
</style>